<template>
  <div class="app">
    <a-config-provider :locale="locale" :get-popup-container="popContainer">
      <router-view />
    </a-config-provider>
    <div class="mask" v-if="isMask" @click.stop>
      <div class="look-click" @click="onClearLock">
        <div class="look-icon"></div>
        <div class="look-text">点击解锁</div>
      </div>
    </div>
  </div>
</template>

<script>
import { enquireScreen } from './utils/util'
import { mapState, mapMutations } from 'vuex'
import themeUtil from '@/utils/themeUtil'
import { getI18nKey } from '@/utils/routerUtil'

export default {
  name: 'App',
  data () {
    return {
      locale: {},
      isMask: false,
      lockCount: 0,
      lockTime: 10 * 60 // 秒
      // lockTime: 10
    }
  },
  created () {
    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen(isMobile => this.setDevice(isMobile))
  },
  mounted () {
    this.setWeekModeTheme(this.weekMode)
    this.pageListener()
  },
  beforeDestroy () {
    this.clearTimer()
  },
  watch: {
    weekMode (val) {
      this.setWeekModeTheme(val)
    },
    lang (val) {
      this.setLanguage(val)
      this.setHtmlTitle()
    },
    $route () {
      this.setHtmlTitle()
    },
    'theme.mode': function (val) {
      const closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
    },
    'theme.color': function (val) {
      const closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
    },
    layout: function () {
      window.dispatchEvent(new Event('resize'))
    }
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
  },
  methods: {
    ...mapMutations('setting', ['setDevice']),
    setWeekModeTheme (weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setLanguage (lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle () {
      const route = this.$route
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
    popContainer () {
      return document.getElementById('popContainer')
    },
    pageListener () {
      // 监听鼠标
      document.onmousemove = event => {
        this.lockCount = 0
      }
      // 监听键盘
      document.onkeydown = () => {
        this.lockCount = 0
      }
      // 监听Scroll
      document.onscroll = () => {
        this.lockCount = 0
      }
      this.setTimer()
    },
    clearTimer () {
      clearInterval(window.lockTimer)
      window.lockTimer = null
    },
    setTimer () {
      this.lockCount = 0
      if (!window.lockTimer) {
        window.lockTimer = window.setInterval(this.onLockTimer, 1000)
      }
    },
    onLockTimer () {
      this.lockCount++
      // console.log(this.lockCount)
      if (this.lockCount > this.lockTime) {
        this.isMask = true
        this.clearTimer()
      }
    },
    onClearLock () {
      this.isMask = false
      this.setTimer()
    },
    onMask (e) {
      console.log(e)
    }
  }
}
</script>
<style lang="less" scoped>
.app {
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .look-click {
    width: 100px;
    height: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .look-icon {
      width: 62px;
      height: 62px;
      background: url('./assets/img/lock_icon.png') no-repeat center center;
      background-size: contain;
    }

    .look-text {
      margin-top: 10px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
  }
}
</style>
